<script setup lang="ts">
import { useElementSize } from '@vueuse/core';
import { AxesHelper, PerspectiveCamera, Scene, WebGLRenderer } from 'three';
import { points } from '../models'
import { onBeforeUnmount } from 'vue';
import { unref } from 'vue';
import { watch } from 'vue';
import { reactive } from 'vue';
import { onMounted, ref } from 'vue';
import { OrbitControls } from 'three/examples/jsm/Addons.js';
const viewEleRef = ref<HTMLElement>()
const containerSizeInfo = reactive(useElementSize(viewEleRef)), renderer = new WebGLRenderer(), scene = new Scene(), perspectiveCamera = new PerspectiveCamera(), axesHelper = new AxesHelper(100)
watch(containerSizeInfo, (v) => {
    renderer.setSize(v.width, v.height)
    perspectiveCamera.aspect = v.width / v.height
    perspectiveCamera.updateProjectionMatrix()
})
perspectiveCamera.position.set(200, 200, 200)
perspectiveCamera.lookAt(points.position)
scene.add(points)
scene.add(axesHelper)
function render() {
    renderer.render(scene, perspectiveCamera)
    requestAnimationFrame(render)
}
onMounted(() => {
    unref(viewEleRef)!.appendChild(renderer.domElement);
    const orbitController = new OrbitControls(perspectiveCamera, renderer.domElement);
    orbitController.listenToKeyEvents(window)
    render()
})
onBeforeUnmount(() => {
    renderer.dispose()
})
</script>
<template>
    <main ref="viewEleRef">

    </main>
</template>